<template>
	<view class="message">
		<!-- S 顶部栏 -->
		<sol-navbar :is-back="false">
			<template v-slot:default>
				<view class="message-naver__left">
					<text class="message-naver__left-text">消息</text>
				</view>
			</template>
			<template v-slot:right>
				<view class="message-naver__right">
					<image class="message-naver__right-icon" src="/static/icon-message/icon_contacts.png"
						mode="scaleToFill" @click="fnNavigateToEvent('contacts')">
					</image>
				</view>
			</template>
		</sol-navbar>
		<!-- E 顶部栏 -->

		<!-- S 收到留言 -->
		<view class="message-comment" @click="fnNavigateToEvent('message-box')">
			<view class="message-comment_header">
				<image class="header-icon" src="/static/icon-message/icon_comment.png" mode="scaleToFill"></image>
				<view class="header-text line-1">
					<text>收到留言</text>
					<text>· 63条</text>
				</view>
				<text class="header-datatime">1分钟前</text>
			</view>
			<view class="message-comment_body">
				<view class="body-users">
					<sol-avatar class="body-users_item" v-for="user in commentUser" :key="user.uid" :src="user.avatar"
						:size="48"></sol-avatar>
					<sol-image class="body-users_more" src="/static/icon-default/icon_more.png" width="56rpx"
						height="56rpx" v-if="commentUser.length >= 5"></sol-image>
				</view>
				<view class="message-count">12</view>
			</view>
		</view>
		<!-- E 收到留言 -->

		<!-- S 消息列表 -->
		<view class="message-list">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in messageList" :key="item.id">
					<view class="message-item" @click="fnNavigateToEvent(item.type)">
						<sol-image class="message-item_left" width="100rpx" height="100rpx" :src="item.icon">
						</sol-image>
						<view class="message-item_right"
							:class="{'message-item_right-last': index == messageList.length - 1}">
							<view class="message-item_right-top">
								<text class="message-item_right-title" v-text="item.title">标题</text>
								<text class="message-item_right-datetime" v-text="item.datetime">刚刚</text>
							</view>
							<view class="message-item_right-bottom">
								<text class="message-item_right-text" v-text="item.msg">暂无</text>
								<text class="message-count" v-if="item.unread > 0" v-text="item.unread">0</text>
							</view>
						</view>
					</view>
					<template v-slot:right>
						<image class="message-item_delete" src="/static/icon-message/icon_delete.png"
							mode="scaleToFill">
						</image>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<!-- E 消息列表 -->


		<!-- 底部导航 S -->
		<sol-tabbar :show-text="false" :list="vuex_tabbar"></sol-tabbar>
		<!-- 底部导航 E -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		encodeParam
	} from "@/utils/function/codeParam.js"

	export default {
		name: "TabbarMessage",
		data() {
			return {
				// 留言用户头像
				commentUser: Array.from({
					length: 5
				}, (v, i) => v = {
					uid: i + 2,
					gender: i % 2 + 2,
					nickname: ['花笙米', '繁星皓月'][i % 2],
					avatar: ['https://dummyimage.com/200x200',
						'/static/icon-default/icon_logo.png'
					][i % 2],
				}),
				// 消息列表
				messageList: [{
						id: 1,
						icon: '/static/icon-message/icon_remind.png',
						title: '通知小助手',
						type: 'notice',
						msg: '您未设置主页访问限制',
						datetime: '12分钟前',
						unread: 1
					},
					{
						id: 2,
						icon: '/static/icon-message/icon_capsule.png',
						title: '随缘胶囊',
						type: 'friend',
						msg: '收到6个招呼及2个好友请求',
						datetime: '8个小时后消失',
						unread: 0
					},
					...Array.from({
						length: 5
					}, (v, i) => v = {
						id: i + 3,
						icon: ['https://dummyimage.com/200x200', '/static/icon-default/icon_logo.png'][i %
							2
						],
						type: ['p2p', 'group'][i % 2],
						title: ['花笙米', '繁星皓月'][i % 2],
						msg: ['后来你们怎么样了？', '明天很凉快，请注意保暖哦。'][i % 2],
						datetime: i + 3 + '分钟前',
						unread: i,
					}),
				],
				// 
			}
		},
		computed: {
			...mapState(['vuex_tabbar']),
		},
		created() {},
		mounted() {},
		methods: {
			// 跳转窗口事件
			fnNavigateToEvent(type = '', value = 0) {
				this.$log(this.$options.name, type);
				let url = null;
				switch (type) {
					case "contacts": // 跳转通讯录
						url = '/pages/user/contacts/contacts';
						break;
					case "message-box": // 跳转留言信箱
						url = '/pages/dynamic/message-box/message-box';
						break;
					case "notice": // 跳转通知小助手
						url = '/pages/other/notice/notice';
						break;
					case "friend": // 跳转随缘胶囊
						url = '/pages/chat/friend/friend';
						break;
					case "p2p": // 跳转聊天窗口-单聊
					case "group": // 跳转聊天窗口-聊天室
						url = '/pages/chat/talk/talk?' + encodeParam({
							id: 1,
							uid: 1,
							type: type,
						});
						break;
				}
				if (!url) return;
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss">
	.message {
		background-color: $--color-background;
		min-height: 90vh;
		padding-bottom: 140rpx;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		overflow: hidden;

		// 顶部栏
		&-naver {
			&__left {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-left: 28rpx;

				&-text {
					font-size: 42rpx;
					font-weight: bold;
					letter-spacing: 4rpx;
					color: #DDDDDD;
				}
			}

			&__right {
				&-icon {
					width: 48rpx;
					height: 44rpx;
					padding: 14rpx 28rpx 14rpx 24rpx;
					display: block;
					overflow: hidden;
				}
			}
		}

		// 气泡数
		&-count {
			padding: 4rpx 16rpx;
			border-radius: 28rpx;
			font-size: 24rpx;
			color: #DDDDDD;
			background-color: #ad4242;
		}

		// 收到留言
		&-comment {
			padding: 32rpx 28rpx;
			background-color: #474e54;
			margin: 28rpx;
			border-radius: 28rpx;

			&_header {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 24rpx;

				.header {
					&-icon {
						width: 44rpx;
						height: 44rpx;
					}

					&-text {
						flex-grow: 1;
						width: 70%;
						font-size: 32rpx;
						color: #DDDDDD;
						letter-spacing: 4rpx;
						margin-left: 20rpx;
					}

					&-datatime {
						font-size: 24rpx;
						color: #878787;
						letter-spacing: 4rpx;
					}
				}
			}

			&_body {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;

				.body {
					&-users {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						&_item {
							margin-right: 18rpx;
						}

						&_more {
							height: 56rpx;
							width: 56rpx;
							border-radius: 50%;
							overflow: hidden;
						}
					}
				}
			}

		}

		// 消息列表
		&-list {
			margin: 0 28rpx;
			border-radius: 28rpx;
			overflow: hidden;
		}

		.message-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 28rpx;
			background-color: #474e54;

			&_left {
				width: 100rpx;
				height: 100rpx;
				background: #576069;
				border-radius: 50%;
				overflow: hidden;
			}

			&_right {
				flex: 1;
				padding-bottom: 32rpx;
				margin-left: 28rpx;
				border-bottom: 2rpx #576069 solid;

				&-last {
					border-bottom: none;
				}

				&-top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;
				}

				&-title {
					font-size: 32rpx;
					letter-spacing: 4rpx;
					font-weight: 400;
					color: #BBBBBB;
				}

				&-datetime {
					font-size: 24rpx;
					font-weight: 400;
					color: #878787;
				}

				&-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				&-text {
					font-size: 28rpx;
					letter-spacing: 4rpx;
					font-weight: 400;
					color: #DDDDDD;
				}
			}

			// 滑动删除按钮
			&_delete {
				width: 84rpx;
				height: 114rpx;
				margin: auto 28rpx;
			}
		}

	}
</style>
